<template>
  <div class="app-center">
    <div class="changeTab">
      <el-tabs v-model="activeName">
        <el-tab-pane label="工作" name="first"></el-tab-pane>
        <el-tab-pane label="管理" name="second">管理</el-tab-pane>
        <el-tab-pane label="开发" name="fourth">开发</el-tab-pane>
      </el-tabs>
    </div>
      <!--工作  -->
    <div v-if="activeName === 'first'">
         <el-input
        placeholder="请输入内容"
        v-model="searchText"
        class="input-with-select"
        size="small"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
     <div class="jump-con">
       <div class="con-left" id='scrollBox' @scroll="scrollJump">
            <div class="app-con" id="shenqing">
                <IconTitle title="办公系统(OA)" imgUrl='yunwei'/>
                <span class="small-title">工作流程</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">订单表</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">办公展板</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">加班申请</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">请假申请</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">外出管理</el-dropdown-item>
                </div><span class="small-title">工作流程</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">订单表</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">办公展板</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">加班申请</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">请假申请</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">外出管理</el-dropdown-item>
                </div>
                </div>
             <div class="app-con" id="fujian">
                <IconTitle title="数字化工厂" imgUrl='yunwei' />
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
                </div> 
                 <div class="app-con" id="shengchan">
                <IconTitle title="生产管理" imgUrl='yunwei' />
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
               </div>  
               <div class="app-con" id="huiju">
                <IconTitle title="边缘数据汇聚" imgUrl='yunwei'/>
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
               </div>
                <div class="app-con" id="qiye">
                <IconTitle title="企业大脑"  imgUrl='yunwei'/>
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
               </div>
                <div class="app-con" id="chanye">
                <IconTitle title="产业互联网" imgUrl='yunwei'/>
                <span class="small-title">MES系统</span>
                <div class="dropdown-item" v-for='(item) in 4'>
                    <el-dropdown-item icon="el-icon-tickets">生产计划</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-picture-outline">工艺管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mobile">生产监控</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-mouse">工位管理</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">工时管理</el-dropdown-item>
                </div>
               </div>
         </div>

       <div class="con-right">
          <div class="my-steps-box">
            <div
              :class="['step-item', activeMenu == index ? 'step-active' : '']"
              v-for="(item, index) in step"
              :key="index"
            >
              <div class="top-title" @click="jump(index)">
                <span class='text'>{{ item.text }}</span>
              </div>
            </div>
          </div>
       </div>
     </div>

  
      </div>
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";
import jQuery from "jquery";
export default {
  name: "IcoTitle",
  components: {
    IconTitle,
  },
  data() {
    return {
      activeName: "first",
      searchText: "",
      step: [
        {
          to: "#shenqing",
          text: "办公系统(OA)",
        },
        {
          to: "#fujian",
          text: "数字化工厂",
        },
        {
          to: "#shengchan",
          text: "生产管理",
        },
        {
          to: "#huiju",
          text: "边缘数据汇聚",
        },
        {
          to: "#qiye",
          text: "企业大脑",
        },
        {
          to: "#chanye",
          text: "产业互联网",
        },
      ],
      activeMenu: 0,
      topArr: [],
      clickFlag: false,
      scrollTop: 0,
    };
  },
  methods: {
    jump(index) {
      this.activeMenu = index; // 当前导航
      this.clickFlag = true;
      const jump = jQuery(".app-con").eq(index);
      this.scrollTop = jump.position().top + this.scrollBox.scrollTop - 102; // 获取需要滚动的距离
      // Chrome
      this.scrollBox.scrollTo({
        top: this.scrollTop,
        behavior: "smooth", // 平滑滚动
      });
    },
    scrollJump(e) {
      const jump = jQuery(".app-con");
      if (e.target.scrollTop === this.scrollTop && this.clickFlag) {
        this.clickFlag = false;
      }
      for (let i = jump.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= jump[i].offsetTop - jump[0].offsetTop;
        if (judge && !this.clickFlag) {
          this.activeMenu = i.toString();
          break;
        }
      }
    },
  },
  mounted() {
    this.scrollBox = document.getElementById("scrollBox");
  },
};
</script>
<style lang="scss">
@import "@/styles/color.scss";
.app-center {
  .el-tabs__nav-wrap::after {
    height: 0px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: $theme;
  }
  .el-tabs__active-bar {
    background-color: $theme;
  }
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #e9f4ff;
    color: $theme;
  }
}
</style>
<style lang="scss" scoped>
@import "@/styles/color.scss";

.app-center {
  width: 60vw;
  padding: 0 20px;
  min-height: 300px;
  z-index: 10;
  .el-input {
    margin-bottom: 10px;
  }
  .dropdown-item {
    display: flex;
    .el-dropdown-menu__item {
      width: 150px;
    }
  }
  .jump-con {
    display: flex;
    height: 300px;
    background: #fff;
    .con-left {
      width: 80%;
      height: 300px;
      overflow-y: scroll;
      .small-title {
        font-size: 12px;
        margin: 10px 0;
        display: block;
      }
    }

    .con-left::-webkit-scrollbar {
      width: 6px;
      height: 7px;
    }
    .con-left::-webkit-scrollbar-thumb {
      background-color: $theme;
      border-radius: 3px;

    }

    .con-right {
      width: 20%;

      padding-left: 20px;
      box-sizing: border-box;
      .my-steps-box {
        font-size: 12px;
        .step-item {
          margin-bottom: 10px;
          position: relative;
          .text {
            cursor: pointer;
          }
        }
        .step-item.step-active {
          .text {
            color: $theme;
          }
        }
        .step-item:nth-last-child(1) .line {
          display: none;
        }
      }
    }
  }
}
</style>